<template>
  <div class="question-teacher">
    <LearnProcess :percent="percent"
                  :student-num="studentNum"
                  :down-load-num="downLoadNum"
                  :question-num="questionNum"
                  :nobrowsed-num="nobrowsedNum"/>
    <div class="download">
      <div class="config-title">课程学习</div>
      <!--      <a-button class="purple-button" shape="round" ><a-icon type="upload" />导出</a-button>-->
      <a-upload
        name="file"
        :multiple="false"
        :showUploadList="false"
        :customRequest="customRequest"
      >
        <a-button class="purple-button" shape="round" style="margin-left: 16px;background-color: #1BD0A2">
          <a-icon type="download"/>
          导入
        </a-button>
      </a-upload>
    </div>
    <div class="classlist-container">
      <div
        v-for="(item, index) in classList"
        :key="index"
      >
        <ClassEntrance :info="item" :sequence-number="index" @fresh="refresh"/>
      </div>

    </div>

  </div>
</template>

<script>
import ClassEntrance from "./component/TeacherClassEntrance"
import api from "./../../../common/api"
import LearnProcess from "./component/TeacherLearnProcess"

export default {
  name: 'TeacherCourses',
  data() {
    return {
      percent: 70,
      studentNum: 99,
      downLoadNum: 500,
      questionNum: 66,
      nobrowsedNum: 66,

      classList: [
        {
          id: 1,
          coursewareName: "try尝试.txt",
          hasDownload: false,
        }
      ]
    };
  },
  mounted() {
    //初始化
    this.refresh()
  },
  methods: {
    // 自定义上传
    customRequest(file) {
      let form = new window.FormData();
      form.append('file', file.file)
      this.$postCPG(api.uploadCourse,
        form
      ).then(res => {
        if (res.success) {
          this.$message.success(`${file.file.name} 文件上传成功`);
        }
        // console.log(res)
        this.refresh()
      }).catch(err => {
        console.log(err)
        this.$message.error(`${file.file.name} 文件上传失败`);
      })
    },
    //刷新文件列表
    refresh() {
      //总体进度
      this.$getCPG(api.getGropLearnProcess).then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.percent = res.data * 100
          }
        }
      ).catch(err => {
        console.log(err)
      })
      //获得未读消息
      this.$getCPG(api.getUnreaded).then(res => {
          if (res.code === 200) {
            this.nobrowsedNum = res.data.count
            // this.percent=res.data*100
          }
        }
      ).catch(err => {
        console.log(err)
      })
      console.log("refresh")
      this.$getCPG(api.getCourseList, {
        page: 0,
        size: 100
      }).then(res => {
        if (res.code === 200) {
          let classList = res.data
          classList.forEach(function (item) {
            item.hasDownloaded = false
          })
          this.classList = classList
        }
      }).catch(err => {
        console.log(err)
      })
    },
  },
  components: {
    ClassEntrance,
    LearnProcess
  },
};
</script>

<style lang="less" scoped>
@import "./../../../styles/global.less";

.question-teacher {
  .download {
    display: flex;
  }

  .classlist-container {
    background-color: white;
    border-radius: 2px;
    padding: 30px;
  }
}

</style>
